<template>
  <div class="goods">
    <div class="input">
      <el-input v-model="queryModel.query" placeholder="请输入要搜索的内容" class="input-with-select" size="large">
        <template #append>
          <el-button>
            <el-icon class="is-loading">
              <Search @click="queryModel.pagenum = 1; getlist()" />
            </el-icon>
          </el-button>
        </template>
      </el-input>
      <el-button type="primary" class="button" @click="addList">添加用户</el-button>
    </div>
    <Table :data="list" :cols="cols">
      <template v-slot:time="{ row: { add_time } }">
        {{ new Date(add_time + 1000).format() }}
      </template>
      <template v-slot:action="{ row }">
        <el-button type="primary" size="small" @click="updatalist(row)">修改</el-button>
        <el-button type="danger" size="small" @click="delList(row)">删除</el-button>
      </template>
    </Table>
    <!-- -------------------------------------------------------------------------------- -->
    <el-pagination :current-page="queryModel.pagenum" :page-size="queryModel.pagesize" :page-sizes="[5, 10, 20, 30]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    <!-- ------------------------------------------- -->
    <el-dialog v-model="dialogVisible" width="30%" title="编辑商品">
      <el-form :model="ruleForm" class="demo-model">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="ruleForm.goods_name" />
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input v-model="ruleForm.goods_number" />
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="ruleForm.goods_price" />
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="ruleForm.goods_weight" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import {useRouter} from 'vue-router'
import { getgoodslist, deletelist, addgoods,updatagoods } from '../../api/goods'
import Table from '../../components/table.vue'
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  setup(props) {
    const router=useRouter()
    const data = reactive({
      cols: [
        {
          title: '#',
          type: 'index',
          width:50
        },
        {
          title: '商品名称',
          name: 'goods_name',
          width: '400'
        },
        {
          title: '商品价格(元)',
          name: 'goods_number',
          align: 'center'
        },
        {
          title: '商品重量',
          name: 'goods_weight',
          align: 'center'
        },
        {
          title: '创建时间',
          slot: 'time'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      dialogVisible: false,
      ruleForm: {},
      // 表格
      list: [],
      //分页
      total: 0,
      queryModel: {
        //搜索输入框绑定关键字
        qurey: "",
        //当前页数
        pagenum: 1,
        //一页显示几条
        pagesize: 5,
        rules: [
          {
            goods_name: [{ required: true, }, { message: '请输入商品名' }],
          }
        ]
      },
    });

    onMounted(() => {
      getlist();
      console.log(data.list);
    });
    const getlist = () => {
      console.log(data.queryModel);
      getgoodslist(data.queryModel).then(res => {
        console.log(res.data);
        const { total, goods } = res.data
        data.total = total
        data.list = goods
      });
    };
    //监听每页显示的条数
    const handleSizeChange = (val) => {
      data.queryModel.pagesize = val
      getlist();
    };
    //监听当前页数
    const handleCurrentChange = (val) => {
      data.queryModel.pagenum = val
      getlist();
    };
    //添加用户
    const addList = () => {
        router.push('/addGoods')
    };
    //修改点击事件
    const updatalist = (val) => {
      data.dialogVisible=true
      data.ruleForm=val
      console.log(val);
    }
    const confirm=()=>{
        updatagoods(data.ruleForm).then(res=>{
        console.log(res);
      })
    }
    //删除用户
    const delList = (row) => {
      let id = row.goods_id
      ElMessageBox.confirm("你确定要删除本条数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletelist(id)
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });


    }
    return {
      ...toRefs(data),
      addList,
      getlist,
      handleSizeChange,
      handleCurrentChange,
      updatalist,
      delList,
      confirm,
    };
  },
  components: { Table }
}
</script>
<style lang="scss" scoped>
.goods {
  padding: 20px 10px;
  background: #fff;
  box-shadow: 1px 1px 30px rgb(151, 146, 146);

  .input {
    width: 500px;
    display: flex;

    .button {
      height: 40px;
      margin-left: 20px;
    }
  }
}
</style>
